<template>
  <div class="user-comment">
    <!--标题 -->
    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">发表评论</strong> /
        <small>Make&nbsp;Comments</small></div>
    </div>
    <hr/>

    <div class="comment-main">
      <template v-for="(orderItem,index) in orderItems">
        <div class="comment-list">
          <div class="item-pic">
            <a href="#" class="J_MakePoint">
              <img :src="orderItem.productImg" class="itempic">
            </a>
          </div>

          <div class="">

            <div class="item-name">
              <a href="#">
                <p class="">商品：{{ orderItem.productName }}色</p>
              </a>
            </div>
            <div class="">
              <div class="info-little">
<!--                <span>颜色：洛阳牡丹</span>-->
                <span style="display:inline-block">包装：{{orderItem.skuName}}</span><br>
                <span>数量：x {{orderItem.buyCounts}}</span>
              </div>
              <div class="item-price">
                价格：￥<strong>{{orderItem.totalAmount}}</strong>
              </div>
            </div>
          </div>
          <div class="clear"></div>
          <div class="item-comment">
            <textarea placeholder="请写下对宝贝的感受吧，对他人帮助很大哦！" v-model="form[index].commContent"></textarea>
<!--            <a class="am-btn am-btn-danger" style="float: right;margin-top: 10px">提交评价</a>-->
            是否匿名：<el-switch
                v-model="form[index].isAnonymous"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0">
            </el-switch>
          </div>

          <div class="filePic">
            <input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
            <img src="@/assets/images/image.jpg" alt="">
          </div>
          <div class="item-opinion">
            <li><i :class="{'op1':true,'active':form[index].commLevel==1}" @click="changeCommType(index,1)"></i>好评</li>
            <li><i :class="{'op2':true,'active':form[index].commLevel==2}" @click="changeCommType(index,2)"></i>中评</li>
            <li><i :class="{'op3':true, 'active':form[index].commLevel==3}" @click="changeCommType(index,3)"></i>差评</li>
          </div>

        </div>

      </template>
      <div class="info-btn">
        <div class="am-btn am-btn-danger" @click="submitComment()">发表评论</div>
      </div>
    </div>

  </div>
</template>

<script>
import {submitProductComments} from "@/api/person";

export default {
  name: "PersonComment",
  data() {
    return {
      index: 0,
      orderItems: [],
      form:[],
      orderId:''
    }
  },
  created() {
    this.$emit('changeIndex', 11)
    var orders = JSON.parse(this.$route.query.orders)
    this.orderItems = orders[0].orderItems
    this.orderId = orders[0].orderId
    this.orderItems.forEach(item => {
      var formItem={}
      formItem.commLevel=1;
      formItem.commContent = '';
      formItem.productId=item.productId;
      formItem.productName=item.productName;
      formItem.orderItemId=item.itemId;
      formItem.userId=this.$store.state.id;
      formItem.isAnonymous=0;
      this.form.push(formItem)
    })
  },
  methods:{
    changeCommType(index,flag){
      this.form[index].commLevel = flag;
    },
    submitComment(){
      console.log(this.form)
      submitProductComments(this.form,this.orderId).then(data =>{
        const res = data.data;
        if (res.success){
          this.$message({
            message: '评论成功',
            type: 'success'
          });
          this.$router.push({path: '/person'})
        }else {
          this.$message({
            message: '评论失败',
            type: 'warning'
          });
        }

      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        })
      })

    }

  }
}
</script>

<style scoped>

</style>